<template>
  <el-drawer v-model="draweFrom.drawerVisible" title="修改主题" direction="rtl" class="change-theme">
    <template #default>
      <div class="change-theme-content">
        <div class="change-theme-item" v-for="(item, index) in changeThemeItems" :key="index">
          <span class="demonstration">{{ item.title }}</span>
          <el-color-picker v-model="themeColor[item.key]" show-alpha :predefine="predefineColors"
            @change="handleConfirm" />
        </div>
        <el-button type="primary" @click="handleResetColor">还原</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
// -------------------------------------------------导入相关引用-------------------------------------------------
import { ref, onMounted } from 'vue'
// -------------------------------------------------相关参数定义-------------------------------------------------
const props = withDefaults(defineProps<{
  draweFrom: DrawerFrom
}>(), {
  draweFrom: () => ({
    drawerVisible: false,
  })
});

const changeThemeItems = [
  {
    title: '标题字体颜色',
    key: 'headerTitleTextColor',
  },
  {
    title: '标题背景颜色',
    key: 'bgColor',
  },
  {
    title: '菜单字体颜色',
    key: 'textColor',
  },
  {
    title: '菜单字体选中颜色',
    key: 'menuActiveColor',
  },
  {
    title: '菜单背景颜色',
    key: 'menuBgColor',
  }, {
    title: '框线颜色',
    key: 'borderColor',
  }
];

const predefineColors = ref([
  '#2c2c2c',
  '#bababa',
  '#7a3743',
  '#EBEEF5',
  '#E4E7ED',
  '#F2F6FC',
  '#FFFFFF',
  '#F56C6C',
  '#E6A23C',
  '#5FB878',
  '#1989FA',
])

const initThemeColor = {
  headerTitleTextColor: '#000000',
  bgColor: '#ffffff',
  textColor: '#000000',
  menuBgColor: '#ffffff',
  menuActiveColor: '#00d5ff',
  borderColor: '#bababa',
}

const themeColor = ref<any>({
  ...initThemeColor
});
// -------------------------------------------------事件相关定义-------------------------------------------------
// -------------------------------------------------操作方法定义-------------------------------------------------
function handleResetColor() {
  themeColor.value = initThemeColor;
  localStorage.setItem('themeColor', JSON.stringify(themeColor.value))
  updateCSSVariables()
}

function updateCSSVariables() {
  document.documentElement.style.setProperty('--header-title-text-color', themeColor.value.headerTitleTextColor);
  document.documentElement.style.setProperty('--header-bg-color', themeColor.value.bgColor);
  document.documentElement.style.setProperty('--menu-aside-text-color', themeColor.value.textColor);
  document.documentElement.style.setProperty('--menu-aside-active-text-color', themeColor.value.menuActiveColor);
  document.documentElement.style.setProperty('--menu-aside-bg-color', themeColor.value.menuBgColor);
  document.documentElement.style.setProperty('--menu-aside-border-color', themeColor.value.borderColor);
}

function handleConfirm() {
  updateCSSVariables()
  localStorage.setItem('themeColor', JSON.stringify(themeColor.value))
}

onMounted(() => {
  const savedColor = localStorage.getItem('themeColor')
  if (savedColor) {
    themeColor.value = JSON.parse(savedColor);
    updateCSSVariables()
  }
})


// -------------------------------------------------实体类定义区-------------------------------------------------
export interface DrawerFrom {
  drawerVisible: boolean;
}
</script>
<style lang="scss">
.change-theme {
  width: 300px !important;
  height: calc(100% - 60px) !important;
  margin-top: 60px;

  .change-theme-content {
    padding: 10px;

    .change-theme-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
  }


}
</style>